import React, { PureComponent, memo } from 'react'
import PropTypes from 'prop-types'
import LazyLoad from 'react-lazyload'
import './index.scss'
import { formatCount } from 'utils/index'
const VideoItem = memo(function VideoItem(props) {
    const { video, showStatistics } = props
    return (
        <li className="video">
            <a href={'/video/av' + video.aId} className="videolink">
                <div className="video-main">
                    <div className="video-imgbox">
                        {video.pic ? (
                            <img src={video.pic} className="pic" alt={video.title} />
                        ) : null}
                        <div className="cover">
                            {showStatistics ? (
                                <div className="info flex middle between">
                                    <div className=" flex middle">
                                        <span className="cover-icon ml5 mr5 icon-play-count" />
                                        <span className="count">
                                            {formatCount(video.playCount)}
                                        </span>
                                    </div>
                                    <div className=" flex middle">
                                        <span className="cover-icon ml5 mr5 icon-barrage-count" />
                                        <span className="count">
                                            {formatCount(video.barrageCount)}
                                        </span>
                                    </div>
                                </div>
                            ) : null}
                        </div>
                    </div>
                </div>
                <div className="title row2">{video.title}</div>
            </a>
        </li>
    )
})
export default VideoItem
